<template>
  <view>
    <view class="task-box" v-if="messagenotice.length != 0">
      <messageYidu></messageYidu>
      <view class="task-list">
        <view class="task-item-title task-item">
          您有新的运输任务
          <u-badge :is-dot="true"></u-badge>
        </view>
        <view class="task-item">
          <text class="w151">
           运输车辆：京A 12345
          </text>
          <text class="ml16 w151">
            运输路线：北京—广州
          </text>
        </view>
        <view class="task-item task-item-footer">
          2022.05.04 13:00
          <view class="checkInfo">
            查看详情
          </view>
        </view>
      </view>
    </view>
    <kongMessage v-else>暂无信息</kongMessage>
  </view>
</template>

<script>
  export default {
    name: '',
    components: {},
    props:{
      messagenotice:{
        type:Array
      }
    },
    data() {
      return {
        
      };
    },
    created(){},
    mounted(){},
    onLoad(){},
    methods: {
      
    }
  }
</script>

<style lang="scss">
.task-box{
  width: 100%;
  .task-list{
    margin:0 14.5px;
    padding: 0 16px;
    background: #FFFFFF;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    .u-badge{
      margin-left: 8px;
    }
    
    .task-item{
      height: 50px;
      .ml16{
        margin-left: 6px;
      }
      .w151{
        width: 151px;
        display: inline-block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      text{
        font-family: PingFangSC-Regular;
        font-weight: 400;
        font-size: 13px;
        color: #818181;
        letter-spacing: 0.25px;
        line-height: 21px;
        line-height: 50px;
      }
    }
    .task-item-title{
      display: flex;
      align-items: center;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      font-size: 14px;
      color: #2A2929;
      letter-spacing: 0.16px;
    }
    .task-item-footer{
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      font-size: 12px;
      color: #818181;
      letter-spacing: 0.14px;
      .checkInfo{
        width: 76px;
        height: 24px;
        border-radius: 12px;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid #EF4F3F;
        color: #EF4F3F;
      }
    }
  }
}
</style>